<template>
  <div>
    <!-- 通行证模块 -->
    <div class="advanced_box">
      <div class="advanced_box_hd">
        <div class="lev-bg">
          {{ level }}
        </div>
        <div class="advanced_lev_box">
          <p>通行证等级</p>
          <div class="advanced_progress">
            <span :style="{ width: lengthW }"></span>
          </div>
          <div class="jianyan">
            <i class="jy-icon-sm"></i>
            <span
              ><em>{{ exe }}</em
              >/<em>3000</em></span
            >
          </div>
        </div>
        <div class="reward-time">
          奖励领取时间:<span>{{ `${st_time}-${ed_time}` }}</span>
        </div>
      </div>
      <div class="advanced_box_main">
        <div class="advanced_box_main_left">
          <div class="advanced_common">
            <div class="advanced_common_img"></div>
            <div class="advanced_common_name">{{ name_primary_pass }}</div>
          </div>
          <div class="advanced_globa">
            <div class="advanced_globa_img"></div>
            <div class="advanced_globa_name">{{ name_advanced_pass }}</div>
          </div>
        </div>
        <a href="javascript:;" class="left-raw" v-on:click="moveLeft"></a>
        <a href="javascript:;" class="right-raw" v-on:click="moveRight"></a>
        <div class="advanced_box_main_right">
          <ul ref="ulBox">
            <li v-for="item in lst_gift" v-bind:key="item.id">
              <div class="common_bg" v-if="item.itm_primary != null">
                <div class="lev">{{ item.level }}</div>
                <img
                  v-bind:src="
                    item.itm_primary == null ? '' : item.itm_primary.icon
                  "
                  alt=""
                />
                <p
                  class="common_name"
                  v-if="item.itm_primary.type == 2"
                  v-text="
                    item.itm_primary.show_name == null
                      ? item.itm_primary.item_name +
                        '*' +
                        ('' + item.itm_primary.amount != '7884000'
                          ? item.itm_primary.amount / 1440 + '天'
                          : '永久' + '  ')
                      : item.itm_primary.show_name +
                        '*' +
                        (' ' + item.itm_primary.amount != '7884000'
                          ? item.itm_primary.amount / 1440 + '天'
                          : '永久' + ' ')
                  "
                  v-bind:title="
                    item.itm_primary.show_name == null
                      ? item.itm_primary.item_name +
                        '*' +
                        ('' + item.itm_primary.amount != '7884000'
                          ? item.itm_primary.amount / 1440 + '天'
                          : '永久' + '  ')
                      : item.itm_primary.show_name +
                        '*' +
                        ('' + item.itm_primary.amount != '7884000'
                          ? item.itm_primary.amount / 1440 + '天'
                          : '永久' + ' ')
                  "
                ></p>
                <p
                  class="common_name"
                  v-if="item.itm_primary.type == 1"
                  v-text="
                    item.itm_primary.show_name == null
                      ? item.itm_primary.item_name +
                        item.itm_primary.amount +
                        '个'
                      : item.itm_primary.show_name +
                        item.itm_primary.amount +
                        '个'
                  "
                  v-bind:title="
                    item.itm_primary.show_name == null
                      ? item.itm_primary.item_name +
                        item.itm_primary.amount +
                        '个'
                      : item.itm_primary.show_name +
                        item.itm_primary.amount +
                        '个'
                  "
                ></p>
                <a
                  class="common_btn"
                  v-show="item.itm_primary.flag_rcv == 0"
                  v-on:click="_RcvGloryGift('c', item.level)"
                  >领取</a
                >

                <div
                  class="common_btn"
                  v-if="
                    item.itm_primary.type == 2 &&
                    item.itm_primary.flag_rcv == -1
                  "
                  v-text="
                    item.itm_primary == null
                      ? ''
                      : item.itm_primary.amount != '7884000'
                      ? item.itm_primary.amount / 1440 + '天'
                      : '永久'
                  "
                  v-bind:class="{
                    thrity:
                      item.itm_primary == null
                        ? ''
                        : item.itm_primary.amount != '7884000',
                    long: item.itm_primary.amount == '7884000',
                  }"
                ></div>
                <div
                  v-if="
                    item.itm_primary.type == 1 &&
                    item.itm_primary.flag_rcv == -1
                  "
                  v-text="
                    item.itm_primary == null
                      ? ''
                      : item.itm_primary.amount + '个'
                  "
                  class="common_btn"
                ></div>
                <div
                  v-if="item.itm_primary.flag_rcv == 1"
                  class="common_btn common_btn_has"
                >
                  已领取
                </div>
              </div>
              <div class="globa_bg" v-if="item.itm_advanced != null">
                <img
                  v-bind:src="
                    item.itm_advanced == null ? '' : item.itm_advanced.icon
                  "
                />
                <p
                  class="common_name"
                  v-if="item.itm_advanced.type == 2"
                  v-text="
                    item.itm_advanced.show_name == null
                      ? item.itm_advanced.item_name +
                        '*' +
                        ('' + item.itm_advanced.amount != '7884000'
                          ? item.itm_advanced.amount / 1440 + '天'
                          : '永久' + '  ')
                      : item.itm_advanced.show_name +
                        '*' +
                        (' ' + item.itm_advanced.amount != '7884000'
                          ? item.itm_advanced.amount / 1440 + '天'
                          : '永久' + ' ')
                  "
                  v-bind:title="
                    item.itm_advanced == null
                      ? ''
                      : item.itm_advanced.show_name == null
                      ? item.itm_advanced.item_name +
                        '*' +
                        ('' + item.itm_advanced.amount != '7884000'
                          ? item.itm_advanced.amount / 1440 + '天'
                          : '永久' + '  ')
                      : item.itm_advanced.show_name +
                        '*' +
                        ('' + item.itm_advanced.amount != '7884000'
                          ? item.itm_advanced.amount / 1440 + '天'
                          : '永久' + ' ')
                  "
                ></p>
                <p
                  class="common_name"
                  v-if="item.itm_advanced.type == 1"
                  v-text="
                    item.itm_advanced.show_name == null
                      ? item.itm_advanced.item_name +
                        item.itm_advanced.amount +
                        '个'
                      : item.itm_advanced.show_name +
                        item.itm_advanced.amount +
                        '个'
                  "
                  v-bind:title="
                    item.itm_advanced.show_name == null
                      ? item.itm_advanced.item_name +
                        item.itm_advanced.amount +
                        '个'
                      : item.itm_advanced.show_name +
                        item.itm_advanced.amount +
                        '个'
                  "
                ></p>
                <a
                  class="common_btn"
                  v-show="item.itm_advanced.flag_rcv == 0"
                  v-on:click="_RcvGloryGift('h', item.level)"
                  >领取</a
                >

                <div
                  class="common_btn"
                  v-if="
                    item.itm_advanced.type == 2 &&
                    item.itm_advanced.flag_rcv == -1
                  "
                  v-text="
                    item.itm_advanced == null
                      ? ''
                      : item.itm_advanced.amount != '7884000' &&
                        item.itm_advanced != null
                      ? item.itm_advanced.amount / 1440 + '天'
                      : '永久'
                  "
                  v-bind:class="{
                    thrity:
                      item.itm_advanced != null &&
                      item.itm_advanced.amount != '7884000',
                    long: item.itm_advanced.amount == '7884000',
                  }"
                ></div>
                <div
                  v-if="
                    item.itm_advanced.type == 1 &&
                    item.itm_advanced.flag_rcv == -1
                  "
                  v-text="
                    item.itm_advanced == null
                      ? ''
                      : item.itm_advanced.amount + '个'
                  "
                  class="common_btn"
                ></div>
                <div
                  v-if="item.itm_advanced.flag_rcv == 1"
                  class="common_btn common_btn_has"
                >
                  已领取
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 通行证模块 -->
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { RcvGloryGift } from "../api/request";
import { Message } from "element-ui";
export default {
  data() {
    return {
      lst_gift: [],
      num: 0,
      totalNumber: 0,
    };
  },
  mounted() {
    this.getGifData();
  },
  computed: {
    ...mapState("templateDate", [
      "st_time",
      "ed_time",
      "exe",
      "name_primary_pass",
      "name_advanced_pass",
      "level",
    ]),
    lengthW: function () {
      return this.exe / 30 + "%";
    },
  },
  methods: {
    ...mapActions("templateDate", ["GetGiftDataAction", "getTemplateData"]),
    async getGifData() {
      console.log(this.$route.query.id);
      const result = await this.GetGiftDataAction({ id: this.$route.query.id });
      // console.log(result);
      const { data } = result;
      this.lst_gift = data.lst_gift;
      this.totalNumber = Math.ceil(data.lst_gift.length / 5);
    },
    moveRight() {
      debugger;
      if (this.num < this.totalNumber - 1) {
        this.num++;
      } else if (this.num >= this.totalNumber - 1) {
        this.num = this.totalNumber - 1;
      }
      this.$refs.ulBox.style.left = -this.num * 575 + "px";
    },
    moveLeft() {
      if (this.num <= 0) {
        this.num = 0;
      } else {
        this.num--;
      }
      this.$refs.ulBox.style.left = -this.num * 575 + "px";
    },
    //领取奖励
    async _RcvGloryGift(val, lv) {
      const result = await RcvGloryGift({
        id: this.$route.query.id,
        type: val,
        level: lv,
      });
      console.log(result);
      if (result.errCode == 0) {
        Message.success(result.msg);
        this.GetGiftDataAction({ id: this.$route.query.id });
        this.getTemplateData({ id: this.$route.query.id });
      } else {
        Message.error(result.msg);
      }
    },
  },
};
</script>